<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<c:set var="appCtx" value="${pageContext.request.contextPath}" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<tiles:insertAttribute name="common-resources" />
<script type="text/javascript">
$(function() {

	$("#buscarBtn").button();
	$("#buscarBtn").click(function() {
		$("#buscarForm").submit();
		return false;
	});
	
	$("#limpiarBtn").button();
	$('#limpiarBtn').click(function(e)  {
		$("#codigoPostal").attr("value",'');
		$("#localidad").attr("value",'');
		$("#calle").attr("value",'');
		$("#numero").attr("value",'');
		$("#partido").attr("value",'');
		$("#provincia").attr("value",'');
		return false;
	});
	
	$("#acptarBtn").button();
	
	$('.tablaDeResultado tbody tr').bind('click', function(e)  {
		/* SE MARCA COMO SELECCIONADO EL REGISTRO CLICKEADO */
		$('.tablaDeResultado tbody tr').children('td').css('background-color','#fff');
		$(e.currentTarget).children('td').css('background-color','#ccc');
		
		/* SE CARGAN LOS DATOS SELECCIONADOS EN LOS INPUTS DEL FORMULARIO */
		$("#calle").attr("value",'');
		$(e.currentTarget).children("td").each(function (index) {
			switch (index) {
				case 0:
					$("#codigoPostal").attr("value",$(this).text());
					break;
				case 1:
					$("#localidad").attr("value",$(this).text());
					break;
				case 2:
					$("#calle").attr("value",$(this).text());
					break;
				case 3:
					$("#partido").attr("value",$(this).text());
					break;
				case 4:
					$("#provincia").attr("value",$(this).text());
					break;	
			}
		});
		return false;
	});
});	
</script>
</head>
<body>

	<form class="form" action="${appCtx}/buscarDireccion" method="post" id="buscarForm">
	<table style="width:680px;margin-left:10px;" border="1">
	<tr>
		<td>
	 		<fieldset>
				<legend class="form formTitle">
					&nbsp;<fmt:message key="message.searchCriteria" />
				</legend>
				<table>
					<tr><!--  -->
						<td class="label"><label><fmt:message key="label.zipCode" />:</label></td>
						<td><input type="text" name="codigoPostal" id="codigoPostal" style="width:300px;" /></td>
					</tr>
					<tr>
						<td class="label"><label><fmt:message key="label.location" />:</label></td>
						<td><input type="text" name="localidad" id="localidad" style="width:300px;" /></td>
					</tr>
					<tr>
						<td class="label"><label><fmt:message key="label.workerData.street" />:</label></td>
						<td>
							<input name="calle" id="calle" type="text" style="width:300px;" />
							&nbsp;<label><fmt:message key="label.number" />:</label>
							&nbsp;<input name="numero" id="numero" type="text" style="width:70px;" />
						</td>
						
					</tr>
					<tr>
						<td class="label"><label><fmt:message key="label.administrativeArea" />:</label></td>
						<td colspan="3"><input name="partido" id="partido" type="text" style="width:300px;" /></td>
					</tr>
					<tr>
						<td class="label"><label><fmt:message key="label.state" />:</label></td>
						<td colspan="3"><input name="provincia" id="provincia" type="text" style="width:300px;" /></td>
					</tr>
				</table>
			</fieldset>	
		</td>
	</tr>
	<tr>
		<td align="right">
			<button id="buscarBtn"><fmt:message key="button.search" /></button>&nbsp;
			<button id="limpiarBtn"><fmt:message key="button.clean" /></button>&nbsp;
			<button id="acptarBtn"><fmt:message key="button.accept" /></button>&nbsp;
		</td>	
	</tr>
	</table>
	</form>
	
	<div><br /></div>
	
	<c:if test="${displayList == 1}">
		<form class="form">
		<div id="resultados" style="margin-left:10px;">
			<div class="encabezadoDeResultado" style="width:670px;">
					<fmt:message key="message.searchResults" />
			</div>
			<table class="tablaDeResultado" style="width:680px;" border="0">
				<thead>
					<tr>
						<th>Codigo Postal</th>
						<th>Localidad</th>
						<th>Calle</th>
						<th>Partido</th>
						<th>Provincia</th>
					</tr>
				</thead>
				<tbody>
					<tr id="<c:out value='11'/>" style="cursor:pointer;">
						<td>1842</td>
						<td>MONTE GRANDE</td>
						<td>BUENOS AIRES</td>
						<td>ESTEBAN ECHEVERRIA</td>
						<td>BUENOS AIRES</td>
					</tr>
					<tr id="<c:out value='22'/>" style="cursor:pointer;">
						<td>1657</td>
						<td>PABLO PODESTA-BA</td>
						<td>ALEM</td>
						<td>3 DE FEBRERO</td>
						<td>BUENOS AIRES</td>
					</tr>
					<tr id="<c:out value='33'/>" style="cursor:pointer;">
						<td>1842</td>
						<td>MONTE GRANDE</td>
						<td>BUENOS AIRES</td>
						<td>ESTEBAN ECHEVERRIA</td>
						<td>BUENOS AIRES</td>
					</tr>
				</tbody>
			</table>
		</div>
		</form>
	</c:if>
</body>
</html>